<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ACE Mermaid - 产品案例展示</title>
    <link rel="stylesheet" href="src/css/common.css">
    <link rel="stylesheet" href="src/css/index.css">

        
    <!-- 引入mermaid.js库 -->
    <script src="https://cdn.jsdelivr.net/npm/mermaid@11.12.1/dist/mermaid.min.js"></script>
    
    <!-- 引入Prism.js库 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
    <script src="src/js/utils/prism-mermaid.js"></script>
    
    <link rel="stylesheet" href="src/css/demos.css">
</head>

<body>
    <!-- 案例页面英雄区域 -->
    <header class="demos-hero-section">
        <div class="container">
            <div class="hero-content">
                <h1 class="demos-hero-title">ACE Mermaid 产品案例库</h1>
                <p class="demos-hero-subtitle">探索14种图表类型的丰富案例，每个类型包含多个实际应用示例</p>
                <div class="hero-cta">
                    <button class="btn-primary" onclick="window.location.href='editor.html'">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M12 5v14M5 12h14M16.5 8.5L12 13L7.5 8.5"/>
                        </svg>
                        立即使用
                    </button>
                    <button class="btn-secondary" onclick="window.location.href='index.html'">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M19 12H5M12 19l-7-7 7-7"/>
                        </svg>
                        返回首页
                    </button>
                    <button class="btn-tertiary" onclick="window.location.href='/docs/index.html'">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                            <polyline points="14 2 14 8 20 8"/>
                            <line x1="16" y1="13" x2="8" y2="13"/>
                            <line x1="16" y1="17" x2="8" y2="17"/>
                            <polyline points="10 9 9 9 8 9"/>
                        </svg>
                        文档中心
                    </button>
                </div>
            </div>
        </div>
    </header>

    <!-- 案例展示区域 -->
    <section class="demos-section">
        <div class="container">
            <h2 class="section-title">图表案例展示</h2>
            <p class="section-description">浏览我们支持的各种图表类型，点击查看详细案例和预览效果</p>
            
            <!-- 图表分类导航 -->
            <div class="tabs-navigation">
                <button class="tab-nav-btn left-nav" id="left-nav-btn">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                        stroke-linecap="round" stroke-linejoin="round">
                        <polyline points="15 18 9 12 15 6"></polyline>
                    </svg>
                </button>

                <div class="tabs-container" id="tabs-container">
                    <div class="chart-tabs" id="chart-tabs">
                        <!-- 分类按钮将通过JavaScript动态生成 -->
                    </div>
                </div>

                <button class="tab-nav-btn right-nav" id="right-nav-btn">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                        stroke-linecap="round" stroke-linejoin="round">
                        <polyline points="9 18 15 12 9 6"></polyline>
                    </svg>
                </button>
            </div>
            
            <!-- 案例列表 -->
            <div class="cases-grid" id="cases-container">
                <!-- 案例卡片将通过JavaScript动态生成 -->
            </div>
            
            <!-- 图表展示区域 -->
            <div class="chart-display-container" id="chart-display-container">
                <div class="code-panel">
                    <div class="panel-header">
                        <h3>图表代码</h3>
                        <div class="zoom-controls">
                            <button id="copy-btn" class="zoom-button">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                                </svg>
                            </button>
                            <button id="edit-btn" class="zoom-button">
                                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                     <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                                     <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                                 </svg>
                             </button>
                        </div>
                    </div>
                    <div class="code-content-wrapper">
                        <textarea id="code-display" class="code-content" readonly></textarea>
                        <div class="code-highlight"><code></code></div>
                    </div>
                </div>

                <div class="preview-panel" id="preview-panel">
                    <div class="panel-header">
                        <h3>图表预览</h3>
                        <div class="zoom-controls">
                            <button id="zoom-out-btn" class="zoom-button">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <circle cx="12" cy="12" r="10"></circle>
                                    <line x1="8" y1="12" x2="16" y2="12"></line>
                                </svg>
                            </button>
                            <button id="zoom-in-btn" class="zoom-button">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <circle cx="12" cy="12" r="10"></circle>
                                    <line x1="8" y1="12" x2="16" y2="12"></line>
                                    <line x1="12" y1="8" x2="12" y2="16"></line>
                                </svg>
                            </button>
                            <button id="close-btn" class="zoom-button">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <line x1="18" y1="6" x2="6" y2="18"></line>
                                    <line x1="6" y1="6" x2="18" y2="18"></line>
                                </svg>
                            </button>
                        </div>
                    </div>
                    <div class="preview-content" id="chart-preview">
                        <!-- 图表预览将通过JavaScript动态生成 -->
                    </div>
                </div>
            </div>
            

        </div>
    </section>

    <script src="data/demos-charts.js"></script>
    <script type="module" src="src/js/demos.js"></script>
    <script type="module" src="src/js/main.js"></script>
    <script>
        // 打开编辑器函数
        function openEditorWithCode(code) {
            const encodedCode = encodeURIComponent(code);
            window.location.href = `editor.html?code=${encodedCode}`;
        }
        
        // 为编辑按钮添加事件监听
        document.addEventListener('DOMContentLoaded', () => {
            // 为"在编辑器中打开"按钮添加事件
            const openInEditorBtn = document.getElementById('open-in-editor-btn');
            if (openInEditorBtn) {
                openInEditorBtn.onclick = function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    const codeDisplay = document.getElementById('code-display');
                    if (codeDisplay) {
                        const code = codeDisplay.value;
                        openEditorWithCode(code);
                    }
                };
            }
            
            // 为案例卡片的编辑按钮添加事件
            setTimeout(() => {
                const quickPreviewBtns = document.querySelectorAll('.quick-preview-btn');
                quickPreviewBtns.forEach(btn => {
                    const originalClick = btn.onclick;
                    btn.onclick = function(e) {
                        e.preventDefault();
                        e.stopPropagation();
                        
                        // 先执行原有的预览功能
                        if (typeof originalClick === 'function') {
                            originalClick.call(this, e);
                        }
                        
                        // 然后等待代码显示后，获取代码并跳转到编辑器
                        setTimeout(() => {
                            const codeDisplay = document.getElementById('code-display');
                            if (codeDisplay) {
                                const code = codeDisplay.value;
                                // 询问用户是否要在编辑器中打开
                                if (confirm('是否要在编辑器中打开此图表？')) {
                                    openEditorWithCode(code);
                                }
                            }
                        }, 500);
                    };
                });
            }, 1000);
        });
    </script>
    
    <!-- 页脚 -->
    <footer class="footer-section">
        <div class="container">
            <div class="footer-content">
                <div class="footer-logo">
                    <a href="index.html">
                        <h2>ACE图表</h2>
                        <p>专业图表设计平台</p>
                    </a>
                </div>
                <div class="footer-links">
                    <div class="footer-column">
                        <h4>产品</h4>
                        <ul>
                            <li><a href="index.html">首页</a></li>
                            <li><a href="demos.html">案例展示</a></li>
                            <li><a href="docs/index.html#/features">功能介绍</a></li>
                        </ul>
                    </div>
                    <div class="footer-column">
                        <h4>资源</h4>
                        <ul>
                            <li><a href="/docs/index.html#/quickstart">快速开始</a></li>
                            <li><a href="/docs/index.html">文档中心</a></li>
                            <li><a href="/docs/index.html#/api">API参考</a></li>
                            <li><a href="/docs/index.html#/development">开发指南</a></li>
                        </ul>
                    </div>
                    <div class="footer-column">
                        <h4>关于我们</h4>
                        <ul>
                            <li><a href="docs/faq.html">常见问题</a></li>
                            <li><a href="docs/development.html">开发文档</a></li>
                            <li><a href="docs/editor.html">编辑器使用</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2025 ACE Mermaid. 保留所有权利.</p>
            </div>
        </div>
    </footer>
</body>
</html>